<template>
  <div class="top-left">
    <div class="chart-title">今日数据概览</div>
    <div class="row">
      <span class="row-key">申请人数</span>
      <!-- amountFormat默认为分转元，设置整数的时候要乘以100，且不能保留小数 -->
      <span class="row-value">
        <run-number :number="data.credit_venture_submit_uv"></run-number>
        <span class="unit">人</span>
      </span>
    </div>
    <div class="row">
      <span class="row-key">授信人数</span>
      <span class="row-value">
        <run-number :number="data.credit_venture_pass_uv"></run-number>
        <span class="unit">人</span>
      </span>
    </div>
    <div class="row">
      <span class="row-key">放款人数</span>
      <span class="row-value">
        <run-number :number="data.loan_success_uv"></run-number>
        <span class="unit">人</span>
      </span>
    </div>
    <div class="row">
      <span class="row-key">首贷用户</span>
      <span class="row-value">
        <run-number :number="data.first_loan_success_uv"></run-number>
        <span class="unit">人</span>
      </span>
    </div>
    <div class="row mt15">
      <span class="row-key">授信金额</span>
      <span class="row-value">
        <run-number
          :number="Math.ceil(data.credit_venture_quota / 1000000)"
        ></run-number>
        <span class="unit">万</span>
      </span>
    </div>
    <div class="row">
      <span class="row-key">放款金额</span>
      <span class="row-value">
        <run-number
          :number="Math.ceil(data.loan_success_amount / 1000000)"
        ></run-number>
        <span class="unit">万</span>
      </span>
    </div>
    <div class="row">
      <span class="row-key">首贷金额</span>
      <span class="row-value">
        <run-number
          :number="Math.ceil(data.first_loan_success_amount / 100)"
        ></run-number>
        <span class="unit">元</span>
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import runNumber from '@/components/runNumber/index.vue'
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
@Component({
  name: 'top-left',
  components: {
    runNumber
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  @Prop({
    default: {
      // 今日数据
      credit_venture_submit_uv: 0, // 申请人数
      credit_venture_pass_uv: 0, // 授信人数
      loan_success_uv: 0, // 放款人数
      first_loan_success_uv: 0, // 首贷用户
      credit_venture_quota: 0, // 授信金额
      loan_success_amount: 0, // 放款金额
      first_loan_success_amount: 0 // 首贷金额
    }
  })
  private data!: string
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''
  private testNumber: number = 21340
  private timer1: any
  get computedExp() {
    //computed 属性
    return true
  }
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    //mounted 钩子
    this.increaseNumber()
  }
  beforeDestroy() {
    clearInterval(this.timer1)
  }
  private methodExp() {
    // method创建地方
  }
  private increaseNumber() {
    this.timer1 = setInterval(() => {
      this.testNumber = this.testNumber + this.getRandomNumber(1, 100)
    }, 3000)
  }
  private getRandomNumber(min: number, max: number) {
    return Math.floor(Math.random() * (max - min + 1) + min)
  }
}
</script>

<style lang="scss" scoped>
.top-left {
  width: 4.08em;
  height: 3.77em;
  background: url('./../../../../assets/dashboard/top-chart.png') no-repeat
    center;
  background-size: cover;
  border-radius: 0.14em;
  &:hover {
    cursor: pointer;
    animation-name: glow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
  }
  .chart-title {
    font-size: 0.2em;
    height: 4em;
    color: #2fd5ff;
    font-family: FZHei-B01S;
    font-weight: 400;
    line-height: 2em;
    letter-spacing: 0.1em;
    text-align: center;
  }

  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.62em 0 0.45em;
    height: 0.24em;
    margin-bottom: 0.16em;
    .row-key {
      font-size: 0.16em;
      color: #fff;
      font-weight: 300;
      height: 1em;
      line-height: 1em;
    }
    .row-value {
      font-size: 0.3em;
      font-weight: 600;
      color: #daf8ff;
      display: flex;
      align-items: baseline;
      .unit {
        color: #fff;
        font-size: 0.7em;
        font-weight: 400;
        margin-left: 0.35em;
      }
    }
  }
  .mt15 {
    margin-top: 0.15em;
  }
}
</style>
